Getting Started

This tutorial shows you how to create a simple WYSIWYG HTML editing application in less than 10 minutes. The article presupposes that you have downloaded and installed the trial version or commercial version of HTMLEdit.

Basic Editing

After installing HTMLEdit, your Delphi palette has a new page named "Purposesoft". This page contains two components, the main editor component and an action list component. Create a new application and drop the main editor component ("psHtmlEdit") onto the empty form. Set the component's alignment to alClient.

Save the Delphi project and run the application. Now you can type text and apply tags like <b>...</b> by using standard keyboard shortcuts (e.g. <ctrl>-<b> for bold).

Adding more features

Now we will make the application more useful by providing the user with easy access to features such as aligning text, applying styles like bold and italic, undo and redo, clipboard operations, editing lists, etc. For this purpose we will use standard Delphi controls and link them with HTMLEdit using HTMLEdit's standard actions:

1. From the "Win32" palette page drop an ImageList and a Toolbar component onto the form.
2. From the "Purposesoft" palette page drop a psHtmlEditActionList component onto the form. Link the action list to the image list using the action list's Images property. If you do not link these two components then Delphi will not be able to copy the action images into your image list when you create new standard actions. Also link the action list to the HTMLEdit component by using the action list's Editor property.
3. Next we will create a couple of standard actions. Open the action list editor. Choosing "New Standard Action" will open a list of available action classes. The standard actions which are provided with HTMLEdit can be found in the category "HTMLEdit". Select all of them and add them to the action list. Close the action list editor.
4. In the last step we will create a toolbar button for each action and link the action to the toolbar button. But first we need to link the image list to the toolbar. Use the toolbar's images property for that purpose.
5. Now right-click on the empty toolbar and choose "New Button". Select the new button and choose the action "psBoldAction1" for the button's Action property. Repeat this procedure for all remaining actions (psItalicAction1, psUnderlineAction1, etc.).

Conclusion

You have just created an application that offers WYSIWYG HTML editing. Of course real-world applications require more than that. We didn't touch subjects such as loading and saving the document, stylesheets and images. The demo application is a good place to start with that. If you have any questions or comments feel free to use our public newsgroups or contact us via e-mail (contact@purposesoft.com).